<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>오설록 모바일</title>
	<? include "../inc/head.html" ?>
</head>
<body>
<div id="wrapper">
<div id="wrap">
	<? include "../inc/header.html" ?>
	<!-- shopList:S -->
	<header class="shopHead">
		<a href="javascript:prevPage();" class="prev"><img src="../imgs/shop/icon_head_prev.gif" alt="이전"></a>
		<h1>주문/결제</h1>
		<a href="#" class="allCate"><img src="../imgs/shop/icon_head_prd.gif" alt="전체보기"></a>
	</header>


	<div class="subContainer orderContents">
		<h2 class="fir">주문제품내역</h2>
		<ul id="orderList">
			<li>
				<div class="thumb">
					<a href="prdView.html"><img src="../imgs/order/@thumb.jpg" alt=""></a>
				</div>
				<div class="info">
					<p class="name">오설록 레드파파야 블랙티<span>40g</span></p>
					<p class="length">수량 : 1</p>
					<p class="coupon">쿠폰 : 4000원 할인 쿠폰</p>
					<p class="opt">옵션 : 선물포장</p>
					<p class="sale">24,000원</p>
					<p class="price">20,000원</p>
				</div>
			</li>
			<li>
				<div class="thumb">
					<a href="prdView.html"><img src="../imgs/order/@thumb.jpg" alt=""></a>
				</div>
				<div class="info">
					<p class="name">오설록 레드파파야 블랙티<span>40g</span></p>
					<p class="length">수량 : 1</p>
					<p class="coupon">쿠폰 : 4000원 할인 쿠폰</p>
					<p class="sale">24,000원</p>
					<p class="price">20,000원</p>
				</div>
			</li>
			<li>
				<div class="thumb">
					<a href="prdView.html"><img src="../imgs/order/@thumb.jpg" alt=""></a>
				</div>
				<div class="info">
					<p class="name">오설록 레드파파야 블랙티<span>40g</span></p>
					<p class="length">수량 : 1</p>
					<p class="coupon">쿠폰 : 4000원 할인 쿠폰</p>
					<p class="sale">24,000원</p>
					<p class="price">20,000원</p>
				</div>
			</li>
			<!-- javascript 참조 /-->
			<li class="btnLoad gGray">
				<a href="#" class="more"><img src="../imgs/shop/icon_downArr.gif" alt="">주문제품 전체보기 <span class="total">(외 <span>2건</span> 상품)</span></a>
			</li>
		</ul>
		<h2>배송정보입력</h2>
		<form action="#" id="spInfoForm">
		<div id="spInfo" class="tbs01">
		<table>
			<colgroup>
				<col style="width:95px">
				<col style="width:*">
			</colgroup>
			<tbody>
				<tr>
					<th>주문자</th>
					<td>홍길동</td>
				</tr>
				<tr>
					<th>배송지 선택</th>
					<td>
						<select name="" onchange="adrSelect(this.value)">
							<option value="01">기본 배송지 (주문자 주소)</option>
							<option value="02">새주소입력</option>
						</select>
						<a href="#" name="myAddress" class="btn gGray" onclick="showLayer('myAddress'); return false;">나의 주소록</a>
					</td>
				</tr>
				<tr>
					<th>받으시는 분</th>
					<td><input type="text" name="" id="nameShip" value="홍길동" class="field"></td>
				</tr>
				<tr>
					<th>일반전화</th>
					<td>
						<select name="" style="width:29%">
							<option value="02">02</option>
							<option value="031">031</option>
							<option value="032">032</option>
							<option value="033">033</option>
							<option value="041">041</option>
							<option value="042">042</option>
							<option value="043">043</option>
							<option value="051">051</option>
							<option value="052">052</option>
							<option value="053">053</option>
							<option value="054">054</option>
							<option value="055">055</option>
							<option value="061">061</option>
							<option value="062">062</option>
							<option value="063">063</option>
							<option value="064">064</option>
							<option value="070">070</option>
						</select> -
						<input type="tel" name="" class="field" maxlength="4" style="width:29%"> - 
						<input type="tel" name="" class="field" maxlength="4" style="width:29%">
					</td>
				</tr>
				<tr>
					<th>휴대전화</th>
					<td>
						<select name="" style="width:29%">
							<option value="031">010</option>
							<option value="031">011</option>
							<option value="031">016</option>
							<option value="031">017</option>
							<option value="031">018</option>
							<option value="031">019</option>
						</select> -
						<input type="tel" name="" class="field" maxlength="4" style="width:29%"> - 
						<input type="tel" name="" class="field" maxlength="4" style="width:29%">
					</td>
				</tr>
				<tr>
					<th>주소</th>
					<td>
						<p>
						<input type="tel" name="" class="field" maxlength="4" style="width:29%" readonly="readonly"> - 
						<input type="tel" name="" class="field" maxlength="4" style="width:29%" readonly="readonly">
						<a href="#" name="zipcode" class="btn zipcode gGray" onclick="showLayer('zipcode'); return false;">우편번호검색</a>
						</p>
						<p class="adr1"><input type="text" name="" class="field" readonly="readonly"></p>
						<p><input type="text" name="" class="field"></p>
					</td>
				</tr>
				<tr>
					<th>배송 요청사항<br/>(택배사)</th>
					<td>
						<textarea name="" class="field" cols="30" rows="10">부재시 경비실에 맡겨주세요!</textarea>
						<span class="byteChk">(<span class="current">0</span>/<span class="maximum">60</span>byte)</span>
					</td>
				</tr>
				<tr>
					<th>남기시는 말<br/>(오설록)</th>
					<td>
						<textarea name="" class="field" cols="30" rows="10">빠른 배송 부탁합니다.</textarea>
						<span class="byteChk">(<span class="current">0</span>/<span class="maximum">60</span>byte)</span>
					</td>
				</tr>
			</tbody>
		</table>
		</div>
		</form>
		<h2>적립내역</h2>
		<div id="odrPoint" class="tbs01">
		<table>
			<colgroup>
				<col style="width:95px">
				<col style="width:*">
			</colgroup>
			<tbody>
				<tr>
					<th>뷰티포인트</th>
					<td><strong>4,500P</strong></td>
				</tr>
				<tr>
					<th>향기</th>
					<td><strong>4,500</strong> 향기</td>
				</tr>
			</tbody>
		</table>
		</div>
		<h2>사은품내역</h2>
		<section id="odrGift">
			<h1>금액대별 특별 사은품</h1>
			<h2 class="name">* 3만원이상</h2>
			<ul>
				<!-- looof:S -->
				<li class="list">
					<p class="thumb"><img src="../imgs/order/@thumb.jpg" alt=""></p>
					<p class="name">오설록 특별 한정 그린컵 증정오설록 특별 한정 그린컵 증정</p>
				</li>
				<li class="list">
					<p class="thumb"><img src="../imgs/order/@thumb.jpg" alt=""></p>
					<p class="name">오설록 특별 한정 그린컵 증정오설록 특별 한정 그린컵 증정</p>
				</li>
				<!-- loof:E /-->
			</ul>
			<h1 class="prdGift">상품별 사은품</h1>
			<h2 class="name">* 크리스마스 특별 한정 그린컵</h2>
			<ul>
				<!-- looof:S -->
				<li class="list">
					<p class="thumb"><img src="../imgs/order/@thumb.jpg" alt=""></p>
					<p class="name">오설록 특별 한정 그린컵 증정오설록 특별 한정 그린컵 증정</p>
				</li>
				<li class="list">
					<p class="thumb"><img src="../imgs/order/@thumb.jpg" alt=""></p>
					<p class="name">오설록 특별 한정 그린컵 증정오설록 특별 한정 그린컵 증정</p>
				</li>
				<!-- loof:E /-->
			</ul>
			<h2 class="name">* 환경의날 특별 한정 그린컵</h2>
			<ul>
				<li class="list">
					<p class="thumb"><img src="../imgs/order/@thumb.jpg" alt=""></p>
					<p class="name">오설록 특별 한정 그린컵 증정오설록 특별 한정 그린컵 증정</p>
				</li>
			</ul>
		</section>
		<h2>결제정보</h2>
		<div id="odrPayInfo" class="tbs01">
		<table>
			<colgroup>
				<col style="width:95px">
				<col style="width:*">
			</colgroup>
			<tbody>
				<tr>
					<th>총 주문금액</th>
					<td><strong>39,000</strong>원</td>
				</tr>
				<tr>
					<th>상품쿠폰 할인</th>
					<td><strong>-4,000</strong>원</td>
				</tr>
				<tr>
					<th>장바구니 쿠폰</th>
					<td>
						<select name="">
							<option value="02">선택하세요</option>
							<option value="031">---</option>
						</select>
						<p class="couPrice"><strong>0</strong>원</p>
					</td>
				</tr>
				<tr>
					<th>배송비</th>
					<td>무료</td>
				</tr>
				<tr class="total">
					<td colspan="2">
						<p class="total">최종결제금액</p>
						<p class="price"><strong>35,000</strong>원</p>
					</td>
				</tr>
			</tbody>
		</table>
		</div>

		<h2>결제방법 선택</h2>
		<div id="odrPayment">
			<p><label for="card"><input type="radio" name="payment" id="card">신용카드 결제</label></p>
			<p><label for="bank"><input type="radio" name="payment" id="bank">실시간 계좌이체</label></p>
			<p><label for="phone"><input type="radio" name="payment" id="phone">핸드폰소액 결제</label></p>
			<p><label for="point"><input type="radio" name="payment" id="point">뷰티포인트 결제</label></p>
		</div>
		
		<h2 class="cashBill_tit">현금영수증/세금 계산서 발행 신청</h2>
		<div id="cashBill" class="tbs01">
		<table>
			<colgroup>
				<col style="width:95px">
				<col style="width:*">
			</colgroup>
			<tbody>
				<tr>
					<th>구분</th>
					<td>
					<select name="">
						<option value="01">개인소득공제용</option>
						<option value="02">사업자증빙용</option>
						<option value="03">세금계산서</option>
						<option value="04" selected>신청안함</option>
					</select>	
					</td>
				</tr>
				<tr>
					<th>증빙번호</th>
					<td><input type="tel" name="" class="field"></td>
				</tr>
				<tr>
					<td colspan="2">
						<ul class="helpTXT">
							<li>증빙번호는 주민번호 또는 휴대폰번호 “-”를 뺀 숫자만 입력하세요.</li>
							<li>현금영수증 또는 세금계산서는 실시간 계좌이체 결제시만 발급이 가능합니다. 타 결제 수단 이용시 신청안함으로 선택하여 주세요.</li>
							<li>세금계산서는 최종적으로 고객상담실과 상담 후 발급이 가능합니다.</li>
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
		</div>

		<ul class="btnWrap">
			<li><a href="#" class="gGreen">결제하기</a></li>
			<li><a href="#" class="gBrown">장바구니</a></li>
		</ul>
	</div>



	<!-- shopList:E /-->
	<? include "../inc/footer.html" ?>
</div>
<!-- ProductNavi -->
<? include "../inc/aside.html" ?>
<!-- LayerPOP:S -->
<div id="layerBg"></div>
<div class="layerPOP" id="myAddress">
	<h3>나의 주소록</h3>
	<a href="#" onclick="hideLayer('myAddress'); return false;" class="close"><img src="/imgs/pop_btn_close.gif" alt="닫기"></a>
	<div class="addressHistory">
		<ul class="tabSelect">
			<li class="active"><a href="#sec01">나의주소록</a><p><img src="/imgs/pop_tabArr.gif" alt=""></p></li>
			<li><a href="#sec02">과거배송지</a></li>
		</ul>
		<div id="sec01" class="conBox">
			<ul>
				<li class="list">
					<div>
						<p>주문자</p>
						<p>홍길동</p>
					</div>
					<div>
						<p>받으시는 분</p>
						<p>홍길동</p>
					</div>
					<div>
						<p>일반전화</p>
						<p>02-000-000</p>
					</div>
					<div>
						<p>휴대전화</p>
						<p>010-000-0000</p>
					</div>
					<div>
						<p>배송지주소</p>
						<p class="homeAdr">서울 금천구 가산동 237-131 한스빌 507</p>
					</div>
				</li>
				<li class="list">
					<div>
						<p>주문자</p>
						<p>홍길동</p>
					</div>
					<div>
						<p>받으시는 분</p>
						<p>홍길동</p>
					</div>
					<div>
						<p>일반전화</p>
						<p>02-000-000</p>
					</div>
					<div>
						<p>휴대전화</p>
						<p>010-000-0000</p>
					</div>
					<div>
						<p>배송지주소</p>
						<p class="homeAdr">서울 금천구 가산동 237-131 한스빌 507</p>
					</div>
				</li>
			</ul>
			<div class="paging">
				<a href="#"><img src="/imgs/pop_btn_prev.gif" alt="이전"></a>
				<span>
					<a href="#" class="on">1</a>
					<a href="#">2</a>
					<a href="#">3</a>
					<a href="#">4</a>
					<a href="#">5</a>
				</span>
				<a href="#"><img src="/imgs/pop_btn_next.gif" alt="다음"></a>
			</div>
		</div>

		<div id="sec02" class="conBox">
			<ul>
				<li class="list">
					<div>
						<p>주문자</p>
						<p>고길동</p>
					</div>
					<div>
						<p>받으시는 분</p>
						<p>고길동</p>
					</div>
					<div>
						<p>일반전화</p>
						<p>02-000-000</p>
					</div>
					<div>
						<p>휴대전화</p>
						<p>010-000-0000</p>
					</div>
					<div>
						<p>배송지주소</p>
						<p class="homeAdr">서울 금천구 가산동 237-131 한스빌 507</p>
					</div>
				</li>
				<li class="list">
					<div>
						<p>주문자</p>
						<p>고길동</p>
					</div>
					<div>
						<p>받으시는 분</p>
						<p>고길동</p>
					</div>
					<div>
						<p>일반전화</p>
						<p>02-000-000</p>
					</div>
					<div>
						<p>휴대전화</p>
						<p>010-000-0000</p>
					</div>
					<div>
						<p>배송지주소</p>
						<p class="homeAdr">서울 금천구 가산동 237-131 한스빌 507</p>
					</div>
				</li>
			</ul>
			<div class="paging">
				<a href="#"><img src="/imgs/pop_btn_prev.gif" alt="이전"></a>
				<span>
					<a href="#" class="on">1</a>
					<a href="#">2</a>
					<a href="#">3</a>
					<a href="#">4</a>
					<a href="#">5</a>
				</span>
				<a href="#"><img src="/imgs/pop_btn_next.gif" alt="다음"></a>
			</div>
		</div>
	</div>
</div>
<!-- LayerPOP:E /-->
<!-- zipCode:S -->
<div class="layerPOP" id="zipcode">
	<h3>우편번호 검색</h3>
	<a href="#" onclick="hideLayer('zipcode'); return false;" class="close"><img src="/imgs/pop_btn_close.gif" alt="닫기"></a>	
	<form action="#">
	<h4>우편번호 검색</h4>
	<p class="zipHelp">찾으실 지역의 동(읍/면/리)를 입력 하신 후, 검색 버튼을 누르세요.</p>
	<div class="search">
		<p class="fieldWrap"><input type="search" name="" class="field"></p>
		<input type="submit" class="gGray" value="우편번호검색">
	</div>
	<p class="searchHelp">검색 결과 중 해당주소를 선택하시면 자동입력 됩니다.</p>
	<ul class="tbsHead">
		<li class="code">우편번호</li>
		<li class="adr">주소</li>
	</ul>
	<div class="tbs01">
	<table>
		<colgroup>
			<col style="width:60px">
			<col style="width:*">
		</colgroup>
		<tbody>
			<tr>
				<td>705-010</td>
				<td><a href="#">대구시 남구 이천동</a></td>
			</tr>
			<tr>
				<td>705-010</td>
				<td><a href="#">대구시 남구 이천동</a></td>
			</tr>
			<tr>
				<td>705-010</td>
				<td><a href="#">대구시 남구 이천동</a></td>
			</tr>
			<tr>
				<td>705-010</td>
				<td><a href="#">대구시 남구 이천동</a></td>
			</tr>
			<tr>
				<td>705-010</td>
				<td><a href="#">대구시 남구 이천동</a></td>
			</tr>
			<tr>
				<td>705-010</td>
				<td><a href="#">대구시 남구 이천동</a></td>
			</tr>
			<tr>
				<td>705-010</td>
				<td><a href="#">대구시 남구 이천동</a></td>
			</tr>
			<tr>
				<td>705-010</td>
				<td><a href="#">대구시 남구 이천동</a></td>
			</tr>
		</tbody>
	</table>
	</div>


	</form>
</div>
<!-- zipCode:E /-->
</div>




<script>
$("#header").hide();
setTimeout(function(){
	$("#header").slideDown();	
}, 1500);

$(".shopHead .allCate").click(function(){
	$("#showPrdNavi").trigger("click")
});

// 주소선택
function adrSelect(value){
	if(value == 02){
		$("#spInfoForm input:text").val("")
		$("#nameShip").focus();
	}
}

// loadButton
$(".btnLoad").click(function(){
	$(this).remove();
	$("#orderList").css({'padding':'0', 'border-bottom':'none'});
});



// load시 textarea 바이트 체크
$("textarea").each(function(){
	$(this).next(".byteChk").find(".current").html($(this).val().length);
});

// byte체크후 글자 제한
$("textarea").keyup(function(){
	var size = $(this).val().length;
	var max = $(this).next(".byteChk").find(".maximum").text();

	if(size >= max){
		$(this).val($(this).val().substring(0, max-1));
	}
	$(this).next(".byteChk").find(".current").html(size);
});


// 실시간 계좌이체
$("#odrPayment input").click(function(){
	var idx = $("#odrPayment input").index(this);
	
	if(idx == 1){
		$("#cashBill").show();	
		$("#cashBill").prev().show();
	} else {
		$("#cashBill").hide();	
		$("#cashBill").prev().hide();
	}
	
});


// TAB
$(".addressHistory .tabSelect a").click(function(){
	$(".addressHistory .tabSelect li").removeClass("active");
	$(".addressHistory .tabSelect a").next().remove();
	$(this).after("<p><img src='/imgs/pop_tabArr.gif' alt=''></p>");
	$(this).parent().addClass("active");
	$(".conBox").hide();
	$($(this).attr("href")).show();
	return false;
});

</script>
</body>
</html>






